<template>
  <div class="song-sheet-square">
    <nav-bar>
      <div class="left" slot="left">
        <img src="../../assets/img/common/back.svg" alt="" @click="back">
      </div>
      <div class="center" slot="center">
        <p>歌单广场</p>
      </div>
    </nav-bar>
    <slide-bar :types="categories"></slide-bar>
  </div>
</template>

<script>
  import NavBar from "../../components/common/navbar/NavBar";
  import SlideBar from "./ChildSongSheetSquare/SlideBar";
  import {getsongsheetcategory} from "../../network/songsheetsquare";
  export default {
        name: "SongSheetSquare",
        components:{
            NavBar,
            SlideBar
        },
        data(){
          return{
              categories:[],
              id:0,
              name:'',
              tag:{},
          }
        },
        methods:{
            back(){
              this.$router.back();
            },
        },
        created() {
            getsongsheetcategory().then(res=>{
                // console.log(res.data.tags)
                for (let item of res.data.tags){
                    this.id = item.id
                    this.name = item.name
                    this.tag = {
                        id:this.id,
                        name:this.name
                    }
                    this.categories.push(this.tag)
                }
            })
        }
    }
</script>

<style scoped>
  .song-sheet-square{
    position: relative;
    /*top: -44px;*/
    background-color: white;
  }
</style>